<template>
  <div class="hello">
    <div class="list-group">
      <!-- 在v-for循环的时候vue建议为每一项添加key -->
      <div class="list-group-item" v-for="item in list" :key="item.id" :class="{active:item.id==selectId}" @click="dianji(item.id)">
        {{item.name}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      list:[
        {name:'第一项',id:1},
        {name:'第二项',id:2},
        {name:'第三项',id:3},
      ],
      selectId:1,
    }
  },
   methods:{
    dianji:function(id){
      this.selectId = id;
      // this.$router.push页面跳转，传递的参数为跳转路由
      // name 跳转的路由名字
      // query 传递的条件，以url方式传值
      this.$router.push({
        name:'Detail',
        query:{
          id, //相当于id:id
        },
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
